﻿<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title>酷狗音乐</title>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <meta name="apple-mobile-web-app-status-bar-style" content="black">
        <meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">
        <script src="js/1.js"></script>
<style>
/* 头部样式开始*/
header{
    display: flex;
    justify-content: space-between;
    align-items: center;
    background:#0894ec;
    padding: .1rem .4rem;
    position: fixed;
    top:0px;
    z-index:2;
    width: 100%;
}
header .header_left{
    flex:6;
      display: flex;
      align-items: center;
    }
    header .header_left .logo{
        width:1rem;
      height: 1rem;  
    }
    header .header_left .dongganyinyue{
    padding-left:.2rem;
    color: white;
    font-size: .6rem;
    }
    header .header_right{
        flex:1;
    /* border:1px solid red; */
    }
    header .header_right .sousuo{
        width:.7rem;
      /* height: .7rem; */
    }
    header .header_right img,header .header_left .logo img{
      width:100%;

    }
/* 头部样式结束 */

/* tab切换样式开始 */
    .tab-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        border-bottom:1px solid #eeeeee;
        box-shadow: 1px 1px 1px #eeeeee;
        padding-bottom:.05rem;
        position: fixed;
        top:1.2rem;
        z-index:2;
        width: 100%;
        background: white;
    }

.tab-head p {
    margin: auto 0;
    list-style: none;
    height: 1.2rem;
    line-height: 1.2rem;
    text-align: center;
    color: #5f646e;
    width: 25%;
    font-size:.5rem;
    }
    .tab-head .active{
        color:#0894ec;
        border-bottom:2px solid #0894ec;
    }
   
/* tab切换样式结束 */

/* 轮播开始 */
ul { 
 list-style: outside none none; 
 } 
 .slider, .slider-panel img, .slider-extra { 
 width: 100%; 
 } 
 .slider { 
 text-align: center; 
 position: relative; 
 } 
 .slider-panel, .slider-nav, .slider-pre, .slider-next { 
 position: absolute; 
 z-index: 1; 
 } 
 .slider-panel { 
 position: absolute; 
 } 
 .slider-panel img { 
 border: none; 
 } 
 .slider-extra { 
 position: relative; 
 } 
 .slider-nav { 
 position: absolute; 
 left:45%;
 padding-top:30%;

 } 
 .slider-nav li { 
 background: rgba(0, 0, 0, 0.2); 
 border-radius: 50%; 
 color: #fff; 
 cursor: pointer; 
 margin: 0 .2rem; 
 overflow: hidden; 
 text-align: center; 
 display: inline-block; 
 height: .2rem; 
 line-height: .2rem; 
 width: .2rem; 
 } 
 .slider-nav .slider-item-selected { 
 background: white; 
 } 
 .slider-page a{ 
 background: rgba(0, 0, 0, 0.2); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#33000000,endColorstr=#33000000); 
 color: #fff; 
 text-align: center; 
 display: block; 
 font-family: "simsun"; 
 font-size: .5rem; 
 width: .5rem; 
 height:2rem; 
 line-height: 2rem;  
 margin-top:20%;
 } 
 .slider-page a:HOVER { 
 background: rgba(0, 0, 0, 0.4); 
 filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#66000000,endColorstr=#66000000); 
 } 
 .slider-next { 
 left: 100%; 
 margin-left: -1.2rem; 
 } 
.slider{
	 width:100%;
 }

.mulu1{
margin-top:38%;
}
.slider{
	 width:100%;
/* border:1px solid red; */
 }
.slider-main{
	width:100%;
}
.slider-panel{
	width:100%;
}
.slider-panel a{
	display:inline-block;
	width:100%;
}
.slider-panel a img{
	width:100%;
	/* height:100%; */
}
.slider-page{
	width:100%;
}
.banner{
    padding-top:1%;
    margin-top:2.55rem;
}
/* 轮播结束 */

/* 音乐详情库样式开始 */
.mulu1{
  margin-top:40%;  
}
.xiangqing{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding:0 .5rem;
    border-bottom:1px solid #e5e5e5;
    font-size: .4rem;
}
.mulu{
    flex:3;
    /* border:1px solid red; */
    height:1.2rem;
    line-height: 1.2rem;
}
.xiazai{
    flex:1;
    /* border:1px solid red; */
   display: flex;
   align-items: center;
   justify-content:flex-end;
   height:1.2rem;
}
.xiazai img{
    width: 25%;
}
/* 音乐详情库样式结束 */

/* 底部开始 */
footer{
    position: fixed;
    bottom: 0px;
    background: rgba(0, 0, 0, .8);
    display: flex;
    width:100%;
    justify-content: space-between;
    padding: .2rem .1rem;
    height: 1.5rem;
  }
  footer  .bot_left{
    flex:2;
    display: flex;  
    align-items: center;
    justify-content: flex-start;
    /* border:1px solid red; */
  }
  footer  .bot_left .zi{
    color:white;
    margin-left:.4rem;
  }
  footer  .bot_left .zi .geming{
    font-size: .4rem;   
    margin-bottom:6%;
  }
  footer  .bot_left .zi .zuozhe{
    font-size: .4rem;
    color: #888;
  }
  footer  .bot_left .renxiang{
    /* border:1px solid red; */
    width: 1.5rem; 
    height:1.5rem;
  }
  footer  .bot_left  img{
    height:100%;
    width:100%;
    border-radius: 50%;
  }
  footer  .bot_right{
    flex:1;
    display: flex;
    align-items: center;
    /* border:1px solid red; */
  }
  footer  .bot_right .bofang input{
      width: .8rem;
  }
  footer  .bot_right>div{
      width:1rem;
      height:1rem;
      /* border:1px solid red; */
      display: flex;
      align-items: center;
      justify-content:center;
  }
  footer  .bot_right img{
    width:80%;
  }
  #foot{
      display: none;
  }
/* 底部结束 */

/* 弹框开始 */
.tankuang{
    width:100%;
    height:100%;
    background:rgba(0,0,0,.5);
    position:fixed;
    top:0px;
    z-index:9;
    display: none;
  }
  .tishi{
    display:none;
    width:85%;
    border-radius:.5rem;
    margin:0px auto;
  }
  .tishi .dialog-inner{
    width:85%;
    border-top:.1rem solid #0894ec;
    border-radius:.3rem;
    position:fixed;
    z-index: 10;
    top:30%;
    background:white;
  }
  .dialog-bd{
    height:3rem;
    font-size: .5rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom:1px solid #e5e5e5;
  }
  .dialog-ft{
    height:1.5rem;
    display:flex;
    justify-content:space-around;
    align-items: center;
  }
  .dialog-ft span,.dialog-ft a{
    display:inline-block;
    width:50%;
    text-align: center;
    border-radius: 0 0 0 .3rem;
    height:1.5rem;
    line-height:1.5rem;
    font-size: .5rem;
  }
  .dialog-ft a{
    border-left:1px solid #e5e5e5;
    border-radius: 0 0 .3rem 0;
  }
/* 弹框结束 */

/* 切换样式 */
.paihang{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .3rem .4rem;
    border-bottom:1px solid #e5e5e5;
    font-size:.5rem;
  }
  .paihang1{
      margin-top:24%;
  }
  .paihang .paihang_right{
    width:2rem;
      line-height:2rem;
      /* border:1px solid red; */
     text-align: center;
  }
  .paihang .paihang_right img{
      width:25%;
  }
  .paihang .paihang_left{
    display: flex;
    align-items: center;
  }
  .paihang .paihang_left .paihangjpg{
    width: 2.3751rem;
    height: 2.3751rem;
    margin-right:.5rem;
  }
  .paihang .paihang_left .paihangjpg img{
    width:100%;
    height:100%;
  }
  /* 歌单 */
  .gedan p:nth-of-type(1){

    font-size: .4rem;
    margin-bottom:10%;
  }
  .gedan p:nth-of-type(2){
    background: url(image/icon_music.png) no-repeat left center;
    padding-left:17%;
    font-size: .4rem;
    background-size: .5rem;
  }
  /* 歌手 */
  .geshou{
    display: flex;
    justify-content: space-between;
    padding:.4rem .4rem;
    border-bottom:1px solid #e5e5e5;
    font-size: .4rem;
  }
  .geshou .geshou_right img{
    width:60%;
  }
  #book2,#book3,#book4{
      display:none;
  }

</style>
</head>
<script src="js/music.js"></script>
    <!-- 头部开始 -->
<header>
    <div class="header_left">
        <div class="logo"><img src="image/音乐.png" /></div>
         <div class="dongganyinyue">爽歌音乐</div>
    </div>
    <div class="header_right">
        <div class="sousuo" onclick="window.location='search.html'"><img src="image/search.png" /></div>
    </div>    
</header>
<!-- 头部结束 -->
<!-- 正文开始 -->
<div class="tab-head">
            <p id="bg1" class="active bg1" onclick="chgtt(1);">新歌</p>
            <p id="bg2" class="bg1" onclick="chgtt(2);">流行</p>
            <p id="bg3" class="bg1" onclick="chgtt(3);">歌单</p>
            <p id="bg4" class="bg" onclick="chgtt(4);">歌手</p>

</div>
<div id="content">
    <div id="book1">
    <!-- 轮播开始 -->
            <div class="banner">
                    <div class="slider"> 
                        <ul class="slider-main"> 
                         <li class="slider-panel"> 
                         <a href="#" target="_blank"><img src="image/1.jpg"></a> 
                         </li> 
                         <li class="slider-panel"> 
                         <a href="#" target="_blank"><img src="image/2.jpg"></a> 
                         </li> 
                         <li class="slider-panel"> 
                         <a href="#" target="_blank"><img src="image/3.jpg"></a> 
                         </li> 
                         <li class="slider-panel"> 
                         <a href="#" target="_blank"><img src="image/4.jpg"></a> 
                         </li> 
                        </ul> 
                        <div class="slider-extra"> 
                         <ul class="slider-nav"> 
                         <li class="slider-item"></li> 
                         <li class="slider-item"></li> 
                         <li class="slider-item"></li> 
                         <li class="slider-item"></li> 
                         </ul> 
                         <div class="slider-page"> 
                         <a class="slider-pre" href="javascript:;;"><</a> 
                         <a class="slider-next" href="javascript:;;">></a> 
                         </div> 
                        </div> 
                        </div> 
                  </div>
    <!-- 轮播结束 -->
    <!-- 音乐详情开始 -->
    <ul>
        <div class="mulu1 xiangqing">
            <li class="mulu">
                <div class="musname"><span class="zz">MC大科</span>-<span class="gg">小可爱</span></div>
            </li>
            <div class="xiazai"><img src="image/2.png" /></div>
        </div>
        <div class="xiangqing">
            <li class="mulu">
                <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">白噪音</span></div>
            </li>
            <div class="xiazai"><img src="image/2.png" /></div>
        </div>
        <div class="xiangqing">
            <li class="mulu">
                <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">莫扎特催眠曲g大调钢琴</span></div>
            </li>
            <div class="xiazai"><img src="image/2.png" /></div>
        </div>
        <div class="xiangqing">
                <li class="mulu">
                    <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">轻微海浪声</span></div>
                </li>
                <div class="xiazai"><img src="image/2.png" /></div>
            </div>
            <div class="xiangqing">
                <li class="mulu">
                    <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">时钟的滴答声</span></div>
                </li>
                <div class="xiazai"><img src="image/2.png" /></div>
            </div>           
            <div class="xiangqing">
                    <li class="mulu">
                        <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">胎教音乐</span></div>
                    </li>
                    <div class="xiazai"><img src="image/2.png" /></div>
                </div>
                <div class="xiangqing">
                    <li class="mulu">
                        <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">莫扎特催眠曲g大调钢琴</span></div>
                    </li>
                    <div class="xiazai"><img src="image/2.png" /></div>
                </div>   
                <div class="xiangqing">
                        <li class="mulu">
                            <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">时钟的滴答声</span></div>
                        </li>
                        <div class="xiazai"><img src="image/2.png" /></div>
                    </div>
                    <div class="xiangqing">
                        <li class="mulu">
                            <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">时钟的滴答声</span></div>
                        </li>
                        <div class="xiazai"><img src="image/2.png" /></div>
                    </div>   
                    <div class="xiangqing">
                            <li class="mulu">
                                <div class="musname"><span class="zz">王继阳</span>-<span class="gg">坠入爱</span></div>
                            </li>
                            <div class="xiazai"><img src="image/2.png" /></div>
                        </div>
                        <div class="xiangqing">
                            <li class="mulu">
                                <div class="musname"><span class="zz">纯音乐</span>-<span class="gg">莫扎特催眠曲g大调钢琴</span></div>
                            </li>
                            <div class="xiazai"><img src="image/2.png" /></div>
                        </div>
                             

    </ul>
    <!-- 音乐详情结束 -->
    </div>
    <!-- 流行页面开始 -->
    <div id="book2">
            <ul>
                    <li class="paihang paihang1">
                        <div class="paihang_left">
                          <div class="paihangjpg"><img src="image/pai1.png" /></div>
                          <div class="paihangwenzi"> 酷狗飙升榜</div>
                        </div>
                        <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                      </li>
                      <li class="paihang">
                          <div class="paihang_left">
                            <div class="paihangjpg"><img src="image/pai2.png" /></div>
                            <div class="paihangwenzi"> 酷狗飙升榜</div>
                          </div>
                          <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                        </li>
                        <li class="paihang">
                            <div class="paihang_left">
                              <div class="paihangjpg"><img src="image/pai3.png" /></div>
                              <div class="paihangwenzi"> 酷狗飙升榜</div>
                            </div>
                            <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                          </li>
                          <li class="paihang">
                              <div class="paihang_left">
                                <div class="paihangjpg"><img src="image/pai4.png" /></div>
                                <div class="paihangwenzi"> 酷狗飙升榜</div>
                              </div>
                              <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                            </li>
                            <li class="paihang">
                                <div class="paihang_left">
                                  <div class="paihangjpg"><img src="image/pai5.png" /></div>
                                  <div class="paihangwenzi"> 酷狗飙升榜</div>
                                </div>
                                <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                              </li>
                              <li class="paihang">
                                  <div class="paihang_left">
                                    <div class="paihangjpg"><img src="image/pai6.png" /></div>
                                    <div class="paihangwenzi"> 酷狗飙升榜</div>
                                  </div>
                                  <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                                </li>
                                <li class="paihang">
                                    <div class="paihang_left">
                                      <div class="paihangjpg"><img src="image/pai1.png" /></div>
                                      <div class="paihangwenzi"> 酷狗飙升榜</div>
                                    </div>
                                    <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                                  </li>
                    
              </ul>

    </div>
    <!-- 流行页面结束 -->
    <!-- 歌单页面开始 -->
    <div id="book3">
<ul>
              <li class="paihang paihang1">
                  <div class="paihang_left">
                    <div class="paihangjpg"><img src="image/gedan1.jpg" /></div>
                    <div class="paihangwenzi gedan"> 
                      <p>以想念你终此一生</p>
                      <p>631137</p>
                    </div>
                  </div>
                  <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                </li>
                <li class="paihang">
                    <div class="paihang_left">
                      <div class="paihangjpg"><img src="image/gedan2.jpg" /></div>
                      <div class="paihangwenzi gedan"> 
                        <p>以想念你终此一生</p>
                        <p>631137</p>
                      </div>
                    </div>
                    <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                  </li>
                  <li class="paihang">
                      <div class="paihang_left">
                        <div class="paihangjpg"><img src="image/gedan3.jpg" /></div>
                        <div class="paihangwenzi gedan"> 
                          <p>以想念你终此一生</p>
                          <p>631137</p>
                        </div>
                      </div>
                      <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                    </li>
                    <li class="paihang">
                        <div class="paihang_left">
                          <div class="paihangjpg"><img src="image/gedan4.jpg" /></div>
                          <div class="paihangwenzi gedan"> 
                            <p>以想念你终此一生</p>
                            <p>631137</p>
                          </div>
                        </div>
                        <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                      </li>
                      <li class="paihang">
                          <div class="paihang_left">
                            <div class="paihangjpg"><img src="image/gedan5.jpg" /></div>
                            <div class="paihangwenzi gedan"> 
                              <p>以想念你终此一生</p>
                              <p>631137</p>
                            </div>
                          </div>
                          <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                        </li>
                        <li class="paihang">
                            <div class="paihang_left">
                              <div class="paihangjpg"><img src="image/gedan6.jpg" /></div>
                              <div class="paihangwenzi gedan"> 
                                <p>以想念你终此一生</p>
                                <p>631137</p>
                              </div>
                            </div>
                            <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                          </li>
                          <li class="paihang">
                              <div class="paihang_left">
                                <div class="paihangjpg"><img src="image/gedan1.jpg" /></div>
                                <div class="paihangwenzi gedan"> 
                                  <p>以想念你终此一生</p>
                                  <p>631137</p>
                                </div>
                              </div>
                              <div class="paihang_right"><img src="image/arrow_icon.png" /></div>
                            </li>
          </ul>

    </div>
    <!-- 歌单页面结束 -->
    <!-- 歌手页面开始 -->
    <div id="book4">
       
        <ul>
              <li class="geshou paihang1">
                  <div class="geshou_left">热门歌手</div>
                  <div class="geshou_right"><img src="image/arrow_icon.png" /></div>
              </li>
              <li class="geshou">
                  <div class="geshou_left">华语歌手</div>
                  <div class="geshou_right"><img src="image/arrow_icon.png" /></div>
              </li>
              <li class="geshou">
                  <div class="geshou_left">日韩歌手</div>
                  <div class="geshou_right"><img src="image/arrow_icon.png" /></div>
              </li>
              <li class="geshou">
                  <div class="geshou_left">欧美歌手</div>
                  <div class="geshou_right"><img src="image/arrow_icon.png" /></div>
              </li>
              <li class="geshou">
                  <div class="geshou_left">热门歌手</div>
                  <div class="geshou_right"><img src="image/arrow_icon.png" /></div>
              </li>
              <li class="geshou">
                  <div class="geshou_left">热门歌手</div>
                  <div class="geshou_right"><img src="image/arrow_icon.png" /></div>
              </li>
          </ul>
    </div>
</div>
<!-- 正文结束 -->
<!-- 底部开始 -->
<footer id="foot">
    <div class="bot_left">
    <div class="renxiang"><img src="image/tou2.jpg" id="mx"/></div>
    <div class="zi">
        <div class="geming" id="gg">一眼千年</div>
        <div class="zuozhe" id="zz">那英</div>
    </div>
    </div>
<div class="bot_right">
    <div class="bofang"><input type="image" src="image/1.png" id="cbtn"/></div>
    <div class="xiayige"><img src="image/next_icon.png"  id="nbtn"/></div>
    <div id="dbtn"><img src="image/download_icon.png"/></div>
</div>
</footer>
<!-- 底部结束 -->
<!-- 弹框开始 -->
<div class="tankuang" id="cover"></div>
<div class="tishi" id="tishi">
    <div class="dialog-inner">
        <div class="dialog-bd">
          <p>下载需要手机酷狗客户端支持</p>
        </div>
        <div class="dialog-ft">
          <span id="quxiao">取消</span>
          <a href="#" id="kehuduan">在客户端下载</a>
        </div>
      </div>
</div>
<!-- 弹框结束 -->
<script type="text/javascript" src="js/jquery.js"></script> 
<script src="js/index-lunbo.js"> </script> 
<script src="js/tab.js"></script>
